import React, { useState, useEffect, useRef, useCallback } from "react";

// 表情包列表 - 用于弹幕输入时的表情选择
const EMOJIS = [
  "😀",
  "😂",
  "😍",
  "👍",
  "🎉",
  "😎",
  "🥳",
  "😭",
  "😡",
  "🤔",
  "👏",
  "💯",
];

// 敏感词列表 - 包含中英文敏感词汇，用于内容过滤
const SENSITIVE_WORDS = [
  "傻逼",
  "垃圾",
  "废物",
  "白痴",
  "智障",
  "脑残",
  "狗屎",
  "混蛋",
  "王八蛋",
  "贱人",
  "婊子",
  "死妈",
  "去死",
  "自杀",
  "杀人",
  "暴力",
  "色情",
  "黄色",
  "成人",
  "性交",
  "做爱",
  "操你",
  "fuck",
  "shit",
  "bitch",
  "asshole",
  "idiot",
  "stupid",
  "dumb",
  "moron"
];

// 弹幕项接口定义
interface DanmakuItem {
  id: string;           // 弹幕唯一标识（改为string避免数字冲突）
  content: string;      // 弹幕内容
  top: number;          // 弹幕垂直位置（百分比）
  speed: number;        // 弹幕移动速度（秒）
  color: string;        // 弹幕颜色
  isUser: boolean;      // 是否为用户发送的弹幕
  track: number;        // 弹幕所在轨道
  fontSize?: number;    // 字体大小（可选）
  opacity?: number;     // 透明度（可选）
  customColor?: string; // 自定义颜色（可选）
  isPaused?: boolean;   // 是否暂停（可选）
  timestamp?: number;   // 弹幕出现的时间戳（秒）
}

// 预定义弹幕记录 - 模拟从服务器获取的弹幕数据
const PREDEFINED_DANMAKUS = [
  { content: "视频开始了！", timestamp: 0 },
  { content: "666666", timestamp: 2 },
  { content: "前方高能预警", timestamp: 5 },
  { content: "这个视频太赞了", timestamp: 8 },
  { content: "主播好厉害", timestamp: 12 },
  { content: "我来了", timestamp: 15 },
  { content: "哈哈哈", timestamp: 18 },
  { content: "学到了", timestamp: 12 },
  { content: "打卡", timestamp: 15 },
  { content: "前排围观", timestamp: 18 },
  { content: "弹幕护体", timestamp: 2 },
  { content: "太强了", timestamp: 15 },
  { content: "牛逼", timestamp: 18 },
  { content: "膜拜", timestamp: 12 },
  { content: "冲冲冲", timestamp: 15 },
  { content: "加油", timestamp: 16 },
  { content: "绝了", timestamp: 20 },
  { content: "无敌", timestamp: 5 },
  { content: "帅气", timestamp: 18 },
  { content: "酷炫", timestamp: 20 },
  { content: "赞赞赞", timestamp: 15 },
  { content: "这个特效", timestamp: 14 },
  { content: "学到了新知识", timestamp: 13 },
  { content: "支持主播", timestamp: 15 },
  { content: "继续加油", timestamp: 18 },
  { content: "期待下一期", timestamp: 7 },
  { content: "太精彩了", timestamp: 17 },
  { content: "完美", timestamp: 19 },
  { content: "2232", timestamp: 10 },
  { content: "友达弹幕", timestamp: 11 },
  { content: "夏天一定要去一次大溪地", timestamp: 9 },
  { content: "视频结束了", timestamp: 19 },
];

// 弹幕轨道数量
const TRACK_COUNT = 8;

// localStorage 键名
const USER_DANMAKUS_KEY = 'user_danmakus_v1';

// 用户弹幕接口
interface UserDanmaku {
  content: string;
  timestamp: number;
  color: string;
  fontSize: number;
  opacity: number;
  createdAt: number; // 创建时间戳
}

// 弹幕ID生成器
let danmakuIdCounter = 0;
const generateDanmakuId = (): string => {
  return `danmaku_${Date.now()}_${++danmakuIdCounter}`;
};

/**
 * 敏感词过滤函数
 * @param text 需要过滤的文本
 * @returns 过滤后的文本，敏感词被替换为****
 */
const filterSensitiveWords = (text: string): string => {
  if (!text || typeof text !== 'string') return '';
  
  let filteredText = text;
  SENSITIVE_WORDS.forEach(word => {
    const regex = new RegExp(word, 'gi'); // 全局匹配，不区分大小写
    filteredText = filteredText.replace(regex, '****');
  });
  return filteredText;
};

/**
 * 保存用户弹幕到localStorage
 * @param danmaku 用户弹幕数据
 */
const saveUserDanmaku = (danmaku: UserDanmaku) => {
  try {
    const existing = localStorage.getItem(USER_DANMAKUS_KEY);
    const userDanmakus: UserDanmaku[] = existing ? JSON.parse(existing) : [];
    
    // 添加新弹幕
    userDanmakus.push(danmaku);
    
    // 限制保存数量，最多保存1000条
    if (userDanmakus.length > 1000) {
      userDanmakus.splice(0, userDanmakus.length - 1000);
    }
    
    localStorage.setItem(USER_DANMAKUS_KEY, JSON.stringify(userDanmakus));
  } catch (error) {
    console.error('保存用户弹幕失败:', error);
  }
};

/**
 * 从localStorage加载用户弹幕
 * @returns 用户弹幕数组
 */
const loadUserDanmakus = (): UserDanmaku[] => {
  try {
    const existing = localStorage.getItem(USER_DANMAKUS_KEY);
    if (!existing) return [];
    
    const parsed = JSON.parse(existing);
    // 验证数据格式
    if (Array.isArray(parsed)) {
      return parsed.filter(item => 
        item && 
        typeof item.content === 'string' && 
        typeof item.timestamp === 'number' &&
        typeof item.color === 'string' &&
        typeof item.fontSize === 'number' &&
        typeof item.opacity === 'number' &&
        typeof item.createdAt === 'number'
      );
    }
    return [];
  } catch (error) {
    console.error('加载用户弹幕失败:', error);
    return [];
  }
};

/**
 * 清空用户弹幕记录
 */
const clearUserDanmakus = () => {
  try {
    localStorage.removeItem(USER_DANMAKUS_KEY);
  } catch (error) {
    console.error('清空用户弹幕失败:', error);
  }
};

// 单个弹幕组件
const Danmaku: React.FC<{
  content: string;      // 弹幕内容
  top: number;          // 垂直位置
  speed: number;        // 移动速度
  color: string;        // 颜色
  isUser?: boolean;     // 是否为用户弹幕
  onEnd?: () => void;   // 动画结束回调
  fontSize?: number;    // 字体大小
  opacity?: number;     // 透明度
  customColor?: string; // 自定义颜色
  isPaused?: boolean;   // 是否暂停
}> = ({
  content,
  top,
  speed,
  color,
  isUser,
  onEnd,
  fontSize,
  opacity,
  customColor,
  isPaused,
}) => {
  // 弹幕当前位置状态
  const [currentPosition, setCurrentPosition] = useState<number>(100);
  // 动画帧引用
  const animationRef = useRef<number | null>(null);
  // 动画开始时间引用
  const startTimeRef = useRef<number>(0);
  // 动画开始位置引用
  const startPositionRef = useRef<number>(100);

  /**
   * 动画帧更新函数 - 使用requestAnimationFrame实现平滑动画
   * @param timestamp 当前时间戳
   */
  const animate = (timestamp: number) => {
    if (!startTimeRef.current) {
      startTimeRef.current = timestamp;
    }

    // 计算动画进度
    const elapsed = timestamp - startTimeRef.current;
    const progress = Math.min(elapsed / (speed * 1000), 1);
    // 计算新位置：从100%移动到-100%
    const newPosition = startPositionRef.current - (startPositionRef.current * progress);
    
    setCurrentPosition(newPosition);
    
    // 如果动画未完成且未暂停，继续下一帧
    if (progress < 1 && !isPaused) {
      animationRef.current = requestAnimationFrame(animate);
    } else if (progress >= 1) {
      // 动画完成，调用结束回调
      onEnd?.();
    }
  };

  // 监听暂停状态和速度变化，控制动画
  useEffect(() => {
    if (!isPaused) {
      // 开始动画
      startTimeRef.current = 0;
      startPositionRef.current = currentPosition;
      animationRef.current = requestAnimationFrame(animate);
    } else {
      // 暂停动画
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
        animationRef.current = null;
      }
    }

    // 清理函数：取消动画帧
    return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current);
      }
    };
  }, [isPaused, speed]);

  // 弹幕样式
  const style: React.CSSProperties = {
    top: `${top}%`,
    color: customColor || color,
    whiteSpace: "nowrap",
    position: "absolute",
    fontSize: fontSize ? `${fontSize}px` : isUser ? "26px" : "22px",
    fontWeight: isUser ? 800 : 600,
    pointerEvents: "none",
    // 用户弹幕有特殊的光晕效果
    textShadow: isUser
      ? "0 0 8px #fff, 0 0 16px #FFD700, 0 0 2px #000"
      : "-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000",
    filter: isUser ? "brightness(1.3)" : undefined,
    letterSpacing: 1,
    lineHeight: 1.2,
    left: `${currentPosition}%`,
    transform: "translateX(0)",
    willChange: "left", // 优化动画性能
    opacity: opacity ?? 1,
  };
  
  return (
    <div className="danmaku" style={style}>
      {content}
    </div>
  );
};

// 主视频播放器组件（带弹幕功能）
const VideoPlayerWithDanmaku: React.FC = () => {
  // 弹幕列表状态
  const [danmakus, setDanmakus] = useState<DanmakuItem[]>([]);
  // 输入框值状态
  const [inputValue, setInputValue] = useState<string>("");
  // 表情选择器显示状态
  const [showEmoji, setShowEmoji] = useState(false);
  // 视频元素引用
  const videoRef = useRef<HTMLVideoElement>(null);
  // 弹幕容器引用
  const danmakuContainerRef = useRef<HTMLDivElement>(null);
  // 轨道使用情况引用（用于避免弹幕重叠）
  const trackUsage = useRef<number[]>(Array(TRACK_COUNT).fill(0));
  // 视频文件路径
  const videoUrl = "/assets/1.mp4";

  // 字体大小状态
  const [fontSize, setFontSize] = useState<number>(24);
  // 透明度状态
  const [opacity, setOpacity] = useState<number>(1);
  // 自定义颜色状态
  const [customColor, setCustomColor] = useState<string>("#FFD700");
  // 弹幕速度状态
  const [speed, setSpeed] = useState<number>(4);
  // 视频暂停状态
  const [isVideoPaused, setIsVideoPaused] = useState<boolean>(false);
  // 当前视频时间状态
  const [currentTime, setCurrentTime] = useState<number>(0);
  // 已播放的弹幕记录
  const playedDanmakus = useRef<Set<string>>(new Set());
  // 是否启用时间轴同步
  const [enableTimeSync, setEnableTimeSync] = useState<boolean>(true);
  // 用户弹幕记录
  const [userDanmakus, setUserDanmakus] = useState<UserDanmaku[]>([]);
  // 上次发送弹幕时间
  const lastSendTimeRef = useRef<number>(0);
  // 设置面板显示状态
  const [showSettings, setShowSettings] = useState<boolean>(false);
  // 弹幕显示区域状态 (百分比)
  const [danmakuArea, setDanmakuArea] = useState<number>(50);
  // 播放速度状态
  const [playbackSpeed, setPlaybackSpeed] = useState<number>(1);


  // 初始化时加载用户弹幕
  useEffect(() => {
    const savedUserDanmakus = loadUserDanmakus();
    setUserDanmakus(savedUserDanmakus);
  }, []);

  /**
   * 获取下一个可用轨道 - 避免弹幕重叠
   * @returns 可用轨道的索引
   */
  const getNextTrack = () => {
    const usage = trackUsage.current;
    let min = usage[0],
      idx = 0;
    // 找到使用最少的轨道
    for (let i = 1; i < TRACK_COUNT; i++) {
      if (usage[i] < min) {
        min = usage[i];
        idx = i;
      }
    }
    // 标记轨道为使用中
    usage[idx]++;
    // 4秒后释放轨道
    setTimeout(() => {
      usage[idx]--;
    }, 4000);
    return idx;
  };

  /**
   * 添加弹幕到列表
   * @param content 弹幕内容
   * @param isUser 是否为用户发送的弹幕
   * @param timestamp 弹幕出现的时间戳（可选）
   */
  const addDanmaku = (content: string, isUser = false, timestamp?: number) => {
    if (!content.trim()) return;
    
    // 过滤敏感词，但不暂停视频
    const filteredContent = filterSensitiveWords(content);
    
    // 获取轨道和位置
    const track = getNextTrack();
    const maxTop = danmakuArea; // 使用设置的弹幕区域
    const top = 10 + track * (maxTop - 10) / (TRACK_COUNT - 1);
    
    // 创建新的弹幕项
    const newDanmaku: DanmakuItem = {
      id: generateDanmakuId(),
      content: filteredContent,
      top,
      speed: isUser ? speed : Math.floor(Math.random() * 2) + 3,
      color: isUser ? customColor || "#FFD700" : getRandomColor(),
      isUser,
      track,
      fontSize: isUser ? fontSize : undefined,
      opacity: isUser ? opacity : undefined,
      customColor: isUser ? customColor : undefined,
      isPaused: isVideoPaused,
      timestamp: timestamp || currentTime,
    };
    
    // 添加到弹幕列表
    setDanmakus((prev) => [...prev, newDanmaku]);
    
    // 如果是用户弹幕，保存到localStorage
    if (isUser) {
      const userDanmaku: UserDanmaku = {
        content: filteredContent,
        timestamp: timestamp || currentTime,
        color: customColor || "#FFD700",
        fontSize: fontSize,
        opacity: opacity,
        createdAt: Date.now(),
      };
      saveUserDanmaku(userDanmaku);
      setUserDanmakus(prev => [...prev, userDanmaku]);
      setInputValue("");
    }
  };

  /**
   * 生成随机颜色 - 用于自动弹幕
   * @returns 随机颜色值
   */
  const getRandomColor = () => {
    const colors = [
      "#00FFFF", // 青色
      "#FF00FF", // 洋红
      "#FFFF00", // 黄色
      "#00FF00", // 绿色
      "#FF0000", // 红色
      "#00BFFF", // 深天蓝
      "#FFA500", // 橙色
      "#FFFFFF", // 白色
    ];
    return colors[Math.floor(Math.random() * colors.length)];
  };

  /**
   * 检查并播放对应时间点的弹幕（包括预定义弹幕和用户弹幕）
   */
  const checkAndPlayDanmakus = useCallback(() => {
    if (!enableTimeSync || !videoRef.current) return;
    
    const time = videoRef.current.currentTime;
    
    // 检查预定义弹幕
    PREDEFINED_DANMAKUS.forEach((danmaku, index) => {
      // 检查是否到达弹幕出现时间且未播放过
      if (time >= danmaku.timestamp && !playedDanmakus.current.has(`predefined_${index}`)) {
        // 标记为已播放
        playedDanmakus.current.add(`predefined_${index}`);
        // 添加弹幕
        addDanmaku(danmaku.content, false, danmaku.timestamp);
      }
    });
    
    // 检查用户弹幕
    userDanmakus.forEach((danmaku, index) => {
      // 检查是否到达弹幕出现时间且未播放过
      if (time >= danmaku.timestamp && !playedDanmakus.current.has(`user_${index}`)) {
        // 标记为已播放
        playedDanmakus.current.add(`user_${index}`);
        // 添加用户弹幕，使用保存的样式
        const track = getNextTrack();
        const maxTop = danmakuArea; // 使用设置的弹幕区域
        const top = 10 + track * (maxTop - 10) / (TRACK_COUNT - 1);
        
        const newDanmaku: DanmakuItem = {
          id: generateDanmakuId(),
          content: danmaku.content,
          top,
          speed: speed,
          color: danmaku.color,
          isUser: true,
          track,
          fontSize: danmaku.fontSize,
          opacity: danmaku.opacity,
          customColor: danmaku.color,
          isPaused: isVideoPaused,
          timestamp: danmaku.timestamp,
        };
        
        setDanmakus((prev) => [...prev, newDanmaku]);
      }
    });
  }, [enableTimeSync, userDanmakus, speed, isVideoPaused]);



  /**
   * 处理用户发送弹幕
   */
  const handleSendDanmaku = () => {
    if (!inputValue.trim()) return;
    
    // 防止发送过快
    const now = Date.now();
    if (now - lastSendTimeRef.current < 1000) {
      alert('发送太频繁，请稍后再试');
      return;
    }
    lastSendTimeRef.current = now;
    
    addDanmaku(inputValue, true);
  };

  /**
   * 处理键盘事件 - 回车键发送弹幕
   */
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleSendDanmaku();
    }
  };

  /**
   * 重置弹幕系统
   */
  const resetDanmakuSystem = () => {
    setDanmakus([]);
    playedDanmakus.current.clear();
  };

  /**
   * 清空用户弹幕记录
   */
  const handleClearUserDanmakus = () => {
    if (window.confirm('确定要清空所有用户弹幕记录吗？此操作不可恢复。')) {
      clearUserDanmakus();
      setUserDanmakus([]);
      // 重新计算已播放的弹幕
      if (videoRef.current) {
        const time = videoRef.current.currentTime;
        playedDanmakus.current.clear();
        
        // 重新检查预定义弹幕
        PREDEFINED_DANMAKUS.forEach((danmaku, index) => {
          if (time >= danmaku.timestamp) {
            playedDanmakus.current.add(`predefined_${index}`);
          }
        });
      }
    }
  };

  /**
   * 重置所有设置
   */
  const resetAllSettings = () => {
    setFontSize(24);
    setOpacity(1);
    setCustomColor("#FFD700");
    setSpeed(4);
    setDanmakuArea(50);
    setPlaybackSpeed(1);
    setEnableTimeSync(true);
  };

  /**
   * 测试弹幕区域
   */
  const testDanmakuArea = () => {
    addDanmaku("测试弹幕区域", false);
  };

  /**
   * 测试透明度
   */
  const testOpacity = () => {
    addDanmaku("测试透明度", false);
  };

  /**
   * 测试字体大小
   */
  const testFontSize = () => {
    addDanmaku("测试字体大小", false);
  };

  /**
   * 处理播放速度变化
   */
  const handlePlaybackSpeedChange = (newSpeed: number) => {
    setPlaybackSpeed(newSpeed);
    if (videoRef.current) {
      videoRef.current.playbackRate = newSpeed;
    }
  };







  /**
   * 清理过期的弹幕（防止内存泄漏）
   */
  useEffect(() => {
    const interval = setInterval(() => {
      setDanmakus(prev => {
        const now = Date.now();
        return prev.filter(danmaku => {
          // 保留最近30秒内的弹幕
          const timestamp = parseInt(danmaku.id.split('_')[1]);
          return !isNaN(timestamp) && (now - timestamp) < 30000;
        });
      });
    }, 10000); // 每10秒清理一次

    return () => clearInterval(interval);
  }, []);

  // 监听视频事件
  useEffect(() => {
    const video = videoRef.current;
    if (video) {
      const timeUpdateHandler = () => {
        if (video.currentTime !== currentTime) {
          setCurrentTime(video.currentTime);
          checkAndPlayDanmakus();
        }
      };
      
      const playPauseHandler = () => {
        setIsVideoPaused(video.paused);
      };
      
      const seekedHandler = () => {
        const time = video.currentTime;
        setCurrentTime(time);
        
        // 清除已播放记录，重新计算
        playedDanmakus.current.clear();
        
        // 重新检查当前时间点之前的弹幕
        PREDEFINED_DANMAKUS.forEach((danmaku, index) => {
          if (time >= danmaku.timestamp) {
            playedDanmakus.current.add(`predefined_${index}`);
          }
        });
        
        // 重新检查用户弹幕
        userDanmakus.forEach((danmaku, index) => {
          if (time >= danmaku.timestamp) {
            playedDanmakus.current.add(`user_${index}`);
          }
        });
      };
      
      video.addEventListener('timeupdate', timeUpdateHandler);
      video.addEventListener('play', playPauseHandler);
      video.addEventListener('pause', playPauseHandler);
      video.addEventListener('seeked', seekedHandler);
      
      return () => {
        video.removeEventListener('timeupdate', timeUpdateHandler);
        video.removeEventListener('play', playPauseHandler);
        video.removeEventListener('pause', playPauseHandler);
        video.removeEventListener('seeked', seekedHandler);
      };
    }
  }, [enableTimeSync, checkAndPlayDanmakus, userDanmakus]);

  // 主题自适应 - 检测是否为深色主题
  const isDark =
    document.body.dataset.theme === "dark" ||
    document.body.classList.contains("dark");

  return (
    <div
      className="video-container"
      style={{
        position: "relative",
        width: "100%",
        maxWidth: 650,
        height: 450,
        borderRadius: 16,
        overflow: "hidden",
        boxShadow: isDark ? "0 4px 24px #0008" : "0 4px 24px #0001",
        background: isDark ? "#23242a" : "#fff",
        margin: "0 auto",
        display: "flex",
        flexDirection: "column",
        justifyContent: "flex-end",
      }}
    >
      {/* 视频播放器 */}
      <video
        ref={videoRef}
        src={videoUrl}
        style={{
          width: "100%",
          height: "100%",
          objectFit: "cover",
          borderRadius: 16,
          background: "#000",
          display: "block",
        }}
        autoPlay
        muted
        preload="metadata"
        onEnded={() => setIsVideoPaused(true)}
        onError={(e) => {
          console.error('视频加载错误:', e);
        }}
      />

      {/* 弹幕容器 */}
      <div
        ref={danmakuContainerRef}
        className="danmaku-container"
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          overflow: "hidden",
          pointerEvents: "none",
          zIndex: 10,
        }}
      >
        {/* 渲染所有弹幕 */}
        {danmakus.map((danmaku) => (
          <Danmaku
            key={danmaku.id}
            content={danmaku.content}
            top={danmaku.top}
            speed={danmaku.speed}
            color={danmaku.color}
            isUser={danmaku.isUser}
            onEnd={() =>
              setDanmakus((prev) => prev.filter((d) => d.id !== danmaku.id))
            }
            fontSize={danmaku.fontSize}
            opacity={danmaku.opacity}
            customColor={danmaku.customColor}
            isPaused={isVideoPaused}
          />
        ))}
      </div>

      {/* 自定义控制栏 */}
      <div
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          background: "linear-gradient(transparent, rgba(0,0,0,0.8))",
          padding: "20px 16px 16px",
          zIndex: 20,
        }}
      >
        {/* 视频进度条 */}
        <div
          style={{
            marginBottom: "12px",
            position: "relative",
          }}
        >
          <div
            style={{
              width: "100%",
              height: "4px",
              background: "rgba(255,255,255,0.3)",
              borderRadius: "2px",
              position: "relative",
              cursor: "pointer",
            }}
            onClick={(e) => {
              if (videoRef.current) {
                const rect = e.currentTarget.getBoundingClientRect();
                const clickX = e.clientX - rect.left;
                const percentage = clickX / rect.width;
                videoRef.current.currentTime = percentage * videoRef.current.duration;
              }
            }}
          >
            <div
              style={{
                width: `${(currentTime / (videoRef.current?.duration || 1)) * 100}%`,
                height: "100%",
                background: "#ff4d4f",
                borderRadius: "2px",
                transition: "width 0.1s",
              }}
            />
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              marginTop: "4px",
            }}
          >
            <span style={{ color: "white", fontSize: "12px" }}>
              {Math.floor(currentTime)}s / {Math.floor(videoRef.current?.duration || 0)}s
            </span>
            <span style={{ color: "white", fontSize: "12px" }}>
              {Math.floor((currentTime / (videoRef.current?.duration || 1)) * 100)}%
            </span>
          </div>
        </div>

                {/* 控制按钮区域 */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "12px",
          }}
        >
          {/* 设置按钮（播放/暂停） */}
          <button
            onClick={() => {
              if (videoRef.current) {
                if (videoRef.current.paused) {
                  videoRef.current.play();
                } else {
                  videoRef.current.pause();
                }
              }
            }}
            style={{
              background: "rgba(255,255,255,0.2)",
              border: "none",
              borderRadius: "50%",
              width: "36px",
              height: "36px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              color: "white",
              fontSize: "16px",
              transition: "all 0.2s",
            }}
            title="播放/暂停"
          >
            {videoRef.current?.paused ? "▶️" : "⏸️"}
          </button>

          {/* 弹幕发送区域 */}
          <div
            style={{
              flex: 1,
              display: "flex",
              alignItems: "center",
              gap: "8px",
              background: "rgba(255,255,255,0.1)",
              borderRadius: "20px",
              padding: "8px 12px",
            }}
          >
            {/* 弹幕输入框 */}
            <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={handleKeyDown}
              placeholder="发送弹幕..."
              maxLength={50}
              style={{
                flex: 1,
                background: "transparent",
                border: "none",
                outline: "none",
                color: "white",
                fontSize: "14px",
                padding: "0",
              }}
            />
            
            {/* 表情按钮 */}
            <div style={{ position: "relative" }}>
              <button
                onClick={() => setShowEmoji(!showEmoji)}
                style={{
                  background: "none",
                  border: "none",
                  fontSize: "18px",
                  cursor: "pointer",
                  padding: "0",
                  color: "white",
                }}
                title="选择表情"
              >
                😊
              </button>
              {/* 表情包弹出框 */}
              {showEmoji && (
                <div
                  style={{
                    position: "absolute",
                    bottom: "40px",
                    left: "0",
                    background: "rgba(0,0,0,0.9)",
                    border: "1px solid rgba(255,255,255,0.2)",
                    borderRadius: "8px",
                    boxShadow: "0 4px 16px rgba(0,0,0,0.5)",
                    padding: "8px",
                    zIndex: 100,
                    display: "flex",
                    flexWrap: "wrap",
                    width: "200px",
                    gap: "4px",
                  }}
                >
                  {EMOJIS.map((e) => (
                    <span
                      key={e}
                      style={{ 
                        fontSize: "20px", 
                        cursor: "pointer",
                        padding: "4px",
                        borderRadius: "4px",
                        transition: "background 0.2s",
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = "rgba(255,255,255,0.2)";
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = "transparent";
                      }}
                      onClick={() => {
                        setInputValue(inputValue + e);
                        setShowEmoji(false);
                      }}
                    >
                      {e}
                    </span>
                  ))}
                </div>
              )}
            </div>
            
            {/* 发送按钮 */}
            <button
              onClick={handleSendDanmaku}
              style={{
                background: "#ff4d4f",
                color: "white",
                border: "none",
                borderRadius: "16px",
                padding: "6px 12px",
                cursor: "pointer",
                fontSize: "12px",
                fontWeight: "500",
                transition: "background 0.2s",
              }}
            >
              发送
            </button>
          </div>

          {/* 音量控制 */}
          <button
            onClick={() => {
              if (videoRef.current) {
                videoRef.current.muted = !videoRef.current.muted;
              }
            }}
            style={{
              background: "rgba(255,255,255,0.2)",
              border: "none",
              borderRadius: "50%",
              width: "36px",
              height: "36px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              color: "white",
              fontSize: "16px",
            }}
            title="静音/取消静音"
          >
            {videoRef.current?.muted ? "🔇" : "🔊"}
          </button>

          {/* 设置按钮 */}
          <button
            onClick={() => setShowSettings(!showSettings)}
            style={{
              background: showSettings ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.2)",
              border: "none",
              borderRadius: "50%",
              width: "36px",
              height: "36px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              color: "white",
              fontSize: "16px",
              transition: "all 0.2s",
            }}
            title="视频设置"
            onMouseEnter={(e) => {
              if (!showSettings) {
                e.currentTarget.style.background = "rgba(255,255,255,0.3)";
              }
            }}
            onMouseLeave={(e) => {
              if (!showSettings) {
                e.currentTarget.style.background = "rgba(255,255,255,0.2)";
              }
            }}
          >
            ⚙️
          </button>

          {/* 全屏按钮 */}
          <button
            onClick={() => {
              if (videoRef.current) {
                if (document.fullscreenElement) {
                  document.exitFullscreen();
                } else {
                  videoRef.current.requestFullscreen();
                }
              }
            }}
            style={{
              background: "rgba(255,255,255,0.2)",
              border: "none",
              borderRadius: "50%",
              width: "36px",
              height: "36px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              color: "white",
              fontSize: "16px",
            }}
            title="全屏"
          >
            ⛶
          </button>
        </div>
      </div>
      


      {/* 设置面板 */}
      {showSettings && (
        <div
          style={{
            position: "absolute",
            top: 18,
            right: 18,
            zIndex: 40,
            background: isDark ? "rgba(20,24,30,0.98)" : "rgba(255,255,255,0.98)",
            borderRadius: 16,
            boxShadow: isDark ? "0 12px 40px rgba(0,0,0,0.6)" : "0 12px 40px rgba(0,0,0,0.15)",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.1)",
            minWidth: 300,
            maxWidth: 340,
            maxHeight: 600,
            backdropFilter: "blur(20px)",
            animation: "slideInDown 0.3s ease-out",
            display: "flex",
            flexDirection: "column",
          }}
        >
          {/* 标题栏 */}
          <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "20px 24px 16px",
            borderBottom: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.1)",
            flexShrink: 0,
          }}>
            <h3 style={{ 
              margin: 0, 
              fontSize: 18, 
              fontWeight: 600,
              color: isDark ? "#fff" : "#333",
            }}>
              ⚙️ 视频设置
            </h3>
            <button
              onClick={() => setShowSettings(false)}
              style={{
                background: "none",
                border: "none",
                fontSize: 20,
                cursor: "pointer",
                color: isDark ? "#ccc" : "#666",
                padding: "4px",
                borderRadius: "50%",
                width: "32px",
                height: "32px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                transition: "all 0.2s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
                e.currentTarget.style.color = isDark ? "#fff" : "#333";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "transparent";
                e.currentTarget.style.color = isDark ? "#ccc" : "#666";
              }}
              title="关闭设置"
            >
              ✕
            </button>
          </div>

          {/* 滚动容器 */}
          <div 
            className="settings-scroll"
            style={{
              flex: 1,
              overflowY: "auto",
              padding: "0 24px 24px",
              maxHeight: "450px",
            }}
          >

          {/* 播放速度设置 */}
          <div style={{ 
            marginBottom: "24px",
            padding: "16px",
            background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)",
            borderRadius: "12px",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.05)"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            }}>
              <label style={{ 
                fontSize: 14, 
                fontWeight: 500,
                color: isDark ? "#fff" : "#333",
              }}>
                🎬 播放速度
              </label>
              <span style={{ 
                fontSize: 12, 
                color: isDark ? "#ccc" : "#666",
                background: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
                padding: "4px 8px",
                borderRadius: "6px"
              }}>
                {playbackSpeed}x
              </span>
            </div>
            <input
              type="range"
              min={0.5}
              max={3}
              step={0.25}
              value={playbackSpeed}
              onChange={(e) => handlePlaybackSpeedChange(Number(e.target.value))}
              style={{ 
                width: "100%", 
                accentColor: "#1677ff",
                height: "6px",
                borderRadius: "3px",
                background: isDark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.1)",
              }}
            />
            <div style={{ 
              display: "flex",
              justifyContent: "space-between",
              fontSize: 11, 
              color: isDark ? "#999" : "#999",
              marginTop: "8px"
            }}>
              <span>0.5x</span>
              <span>1x</span>
              <span>2x</span>
              <span>3x</span>
            </div>
          </div>



          {/* 弹幕站位区域设置 */}
          <div style={{ 
            marginBottom: "24px",
            padding: "16px",
            background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)",
            borderRadius: "12px",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.05)"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            }}>
              <label style={{ 
                fontSize: 14, 
                fontWeight: 500,
                color: isDark ? "#fff" : "#333",
              }}>
                📍 弹幕区域
              </label>
              <span style={{ 
                fontSize: 12, 
                color: isDark ? "#ccc" : "#666",
                background: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
                padding: "4px 8px",
                borderRadius: "6px"
              }}>
                {danmakuArea}%
              </span>
            </div>
            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "repeat(2, 1fr)",
              gap: "8px", 
              marginBottom: "12px" 
            }}>
              {[25, 50, 70, 100].map((area) => (
                <button
                  key={area}
                  onClick={() => setDanmakuArea(area)}
                  style={{
                    padding: "8px 12px",
                    backgroundColor: danmakuArea === area ? "#1677ff" : "transparent",
                    color: danmakuArea === area ? "white" : (isDark ? "#eee" : "#333"),
                    border: `1px solid ${danmakuArea === area ? "#1677ff" : (isDark ? "#444" : "#ddd")}`,
                    borderRadius: 8,
                    cursor: "pointer",
                    fontSize: 12,
                    fontWeight: 500,
                    transition: "all 0.2s",
                  }}
                  onMouseEnter={(e) => {
                    if (danmakuArea !== area) {
                      e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)";
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (danmakuArea !== area) {
                      e.currentTarget.style.background = "transparent";
                    }
                  }}
                >
                  {area}%
                </button>
              ))}
            </div>
            <button
              onClick={testDanmakuArea}
              style={{
                padding: "8px 12px",
                backgroundColor: "#52c41a",
                color: "white",
                border: "none",
                borderRadius: 8,
                cursor: "pointer",
                fontSize: 12,
                fontWeight: 500,
                width: "100%",
                transition: "all 0.2s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = "#389e0d";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = "#52c41a";
              }}
            >
              🧪 测试弹幕区域
            </button>
          </div>

          {/* 弹幕透明度设置 */}
          <div style={{ 
            marginBottom: "24px",
            padding: "16px",
            background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)",
            borderRadius: "12px",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.05)"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            }}>
              <label style={{ 
                fontSize: 14, 
                fontWeight: 500,
                color: isDark ? "#fff" : "#333",
              }}>
                👁️ 弹幕透明度
              </label>
              <span style={{ 
                fontSize: 12, 
                color: isDark ? "#ccc" : "#666",
                background: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
                padding: "4px 8px",
                borderRadius: "6px"
              }}>
                {Math.round(opacity * 100)}%
              </span>
            </div>
            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: "6px", 
              marginBottom: "12px" 
            }}>
              {[30, 40, 50, 60, 70, 80, 90, 100].map((opacityValue) => (
                <button
                  key={opacityValue}
                  onClick={() => setOpacity(opacityValue / 100)}
                  style={{
                    padding: "6px 8px",
                    backgroundColor: opacity === opacityValue / 100 ? "#1677ff" : "transparent",
                    color: opacity === opacityValue / 100 ? "white" : (isDark ? "#eee" : "#333"),
                    border: `1px solid ${opacity === opacityValue / 100 ? "#1677ff" : (isDark ? "#444" : "#ddd")}`,
                    borderRadius: 6,
                    cursor: "pointer",
                    fontSize: 11,
                    fontWeight: 500,
                    transition: "all 0.2s",
                  }}
                  onMouseEnter={(e) => {
                    if (opacity !== opacityValue / 100) {
                      e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)";
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (opacity !== opacityValue / 100) {
                      e.currentTarget.style.background = "transparent";
                    }
                  }}
                >
                  {opacityValue}%
                </button>
              ))}
            </div>
            <button
              onClick={testOpacity}
              style={{
                padding: "8px 12px",
                backgroundColor: "#52c41a",
                color: "white",
                border: "none",
                borderRadius: 8,
                cursor: "pointer",
                fontSize: 12,
                fontWeight: 500,
                width: "100%",
                transition: "all 0.2s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = "#389e0d";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = "#52c41a";
              }}
            >
              🧪 测试透明度
            </button>
          </div>

          {/* 弹幕字体大小设置 */}
          <div style={{ 
            marginBottom: "24px",
            padding: "16px",
            background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)",
            borderRadius: "12px",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.05)"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            }}>
              <label style={{ 
                fontSize: 14, 
                fontWeight: 500,
                color: isDark ? "#fff" : "#333",
              }}>
                🔤 字体大小
              </label>
              <span style={{ 
                fontSize: 12, 
                color: isDark ? "#ccc" : "#666",
                background: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)",
                padding: "4px 8px",
                borderRadius: "6px"
              }}>
                {fontSize}px
              </span>
            </div>
            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: "6px", 
              marginBottom: "8px" 
            }}>
              {[12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32].map((size) => (
                <button
                  key={size}
                  onClick={() => setFontSize(size)}
                  style={{
                    padding: "6px 8px",
                    backgroundColor: fontSize === size ? "#1677ff" : "transparent",
                    color: fontSize === size ? "white" : (isDark ? "#eee" : "#333"),
                    border: `1px solid ${fontSize === size ? "#1677ff" : (isDark ? "#444" : "#ddd")}`,
                    borderRadius: 6,
                    cursor: "pointer",
                    fontSize: 11,
                    fontWeight: 500,
                    transition: "all 0.2s",
                  }}
                  onMouseEnter={(e) => {
                    if (fontSize !== size) {
                      e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.05)";
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (fontSize !== size) {
                      e.currentTarget.style.background = "transparent";
                    }
                  }}
                >
                  {size}px
                </button>
              ))}
            </div>
            <button
              onClick={testFontSize}
              style={{
                padding: "8px 12px",
                backgroundColor: "#52c41a",
                color: "white",
                border: "none",
                borderRadius: 8,
                cursor: "pointer",
                fontSize: 12,
                fontWeight: 500,
                width: "100%",
                transition: "all 0.2s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.backgroundColor = "#389e0d";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.backgroundColor = "#52c41a";
              }}
            >
              🧪 测试字体大小
            </button>
          </div>

          {/* 弹幕颜色设置 */}
          <div style={{ 
            marginBottom: "24px",
            padding: "16px",
            background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)",
            borderRadius: "12px",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.05)"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            }}>
              <label style={{ 
                fontSize: 14, 
                fontWeight: 500,
                color: isDark ? "#fff" : "#333",
              }}>
                🎨 弹幕颜色
              </label>
              <div style={{
                display: "flex",
                alignItems: "center",
                gap: "8px"
              }}>
                <div
                  style={{
                    width: 20,
                    height: 20,
                    backgroundColor: customColor,
                    borderRadius: "4px",
                    border: "1px solid rgba(255,255,255,0.3)"
                  }}
                />
                <span style={{ 
                  fontSize: 12, 
                  color: isDark ? "#ccc" : "#666"
                }}>
                  {customColor}
                </span>
              </div>
            </div>
            <div style={{ 
              display: "flex", 
              alignItems: "center", 
              gap: 12, 
              marginBottom: 12 
            }}>
              <input
                type="color"
                value={customColor}
                onChange={(e) => setCustomColor(e.target.value)}
                style={{
                  width: 48,
                  height: 48,
                  border: "none",
                  background: "none",
                  borderRadius: 12,
                  cursor: "pointer",
                  boxShadow: isDark ? "0 4px 12px rgba(0,0,0,0.3)" : "0 4px 12px rgba(0,0,0,0.1)",
                }}
                title="选择自定义颜色"
              />
              <span style={{ 
                fontSize: 12, 
                color: isDark ? "#ccc" : "#666"
              }}>
                自定义颜色
              </span>
            </div>
            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 8, 
              marginBottom: 8 
            }}>
              {["#FFD700", "#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#00FFFF", "#FFFFFF", "#FFA500"].map((color) => (
                <button
                  key={color}
                  onClick={() => setCustomColor(color)}
                  style={{
                    width: 36,
                    height: 36,
                    backgroundColor: color,
                    border: `3px solid ${customColor === color ? "#1677ff" : "transparent"}`,
                    borderRadius: 8,
                    cursor: "pointer",
                    transition: "all 0.2s",
                    boxShadow: customColor === color ? "0 0 0 2px rgba(22,119,255,0.3)" : "none",
                  }}
                  title={color}
                  onMouseEnter={(e) => {
                    if (customColor !== color) {
                      e.currentTarget.style.transform = "scale(1.1)";
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (customColor !== color) {
                      e.currentTarget.style.transform = "scale(1)";
                    }
                  }}
                />
              ))}
            </div>
          </div>

          {/* 其他功能按钮 */}
          <div style={{ 
            marginBottom: "24px",
            padding: "16px",
            background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)",
            borderRadius: "12px",
            border: isDark ? "1px solid rgba(255,255,255,0.1)" : "1px solid rgba(0,0,0,0.05)"
          }}>
            <div style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            }}>
              <label style={{ 
                fontSize: 14, 
                fontWeight: 500,
                color: isDark ? "#fff" : "#333",
              }}>
                ⚡ 快捷操作
              </label>
            </div>
            <div style={{ 
              display: "grid", 
              gridTemplateColumns: "1fr 1fr",
              gap: "8px", 
              marginBottom: "12px" 
            }}>
              <button
                onClick={resetDanmakuSystem}
                style={{
                  padding: "8px 12px",
                  backgroundColor: "#1677ff",
                  color: "white",
                  border: "none",
                  borderRadius: 8,
                  cursor: "pointer",
                  fontSize: 12,
                  fontWeight: 500,
                  transition: "all 0.2s",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = "#0958d9";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = "#1677ff";
                }}
              >
                🔄 重置弹幕
              </button>
              <button
                onClick={handleClearUserDanmakus}
                style={{
                  padding: "8px 12px",
                  backgroundColor: "#ff4d4f",
                  color: "white",
                  border: "none",
                  borderRadius: 8,
                  cursor: "pointer",
                  fontSize: 12,
                  fontWeight: 500,
                  transition: "all 0.2s",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = "#cf1322";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = "#ff4d4f";
                }}
              >
                🗑️ 清空记录
              </button>
            </div>
            <label style={{ 
              fontSize: 12, 
              color: isDark ? "#ccc" : "#666",
              display: "flex",
              alignItems: "center",
              gap: 8,
              padding: "8px 12px",
              background: isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)",
              borderRadius: 8,
              cursor: "pointer",
              transition: "all 0.2s",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)";
            }}
            >
              <input
                type="checkbox"
                checked={enableTimeSync}
                onChange={(e) => setEnableTimeSync(e.target.checked)}
                style={{ 
                  margin: 0,
                  accentColor: "#1677ff"
                }}
              />
              ⏰ 时间轴同步
            </label>
          </div>

          {/* 重置所有设置按钮 */}
          <button
            onClick={resetAllSettings}
            style={{
              padding: "12px 16px",
              backgroundColor: "#ff4d4f",
              color: "white",
              border: "none",
              borderRadius: 12,
              cursor: "pointer",
              fontSize: 14,
              fontWeight: 600,
              width: "100%",
              transition: "all 0.2s",
              boxShadow: "0 4px 12px rgba(255,77,79,0.3)",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = "#cf1322";
              e.currentTarget.style.boxShadow = "0 6px 16px rgba(255,77,79,0.4)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = "#ff4d4f";
              e.currentTarget.style.boxShadow = "0 4px 12px rgba(255,77,79,0.3)";
            }}
          >
            🔄 重置所有设置
          </button>
          </div>
        </div>
      )}
      
      {/* 时间显示 */}
      <div
        style={{
          position: "absolute",
          top: 18,
          left: 18,
          zIndex: 30,
          background: isDark ? "rgba(30,34,40,0.92)" : "rgba(255,255,255,0.92)",
          borderRadius: 8,
          padding: "6px 12px",
          boxShadow: isDark ? "0 4px 24px #0008" : "0 4px 24px #0002",
          color: isDark ? "#eee" : "#333",
          fontSize: 14,
          fontWeight: 500,
        }}
      >
        时间: {Math.floor(currentTime)}s | 用户弹幕: {userDanmakus.length}
      </div>
      
      {/* CSS样式 */}
      <style>{`
        .danmaku-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          pointer-events: none;
        }
        .danmaku {
          position: absolute;
          white-space: nowrap;
          font-size: 16px;
          font-weight: 500;
          text-shadow: 
            -1px -1px 0 #000,
             1px -1px 0 #000,
            -1px  1px 0 #000,
             1px  1px 0 #000;
          z-index: 10;
        }
        
        @keyframes slideInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes slideInDown {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        
        /* 自定义滚动条样式 */
        .settings-scroll::-webkit-scrollbar {
          width: 6px;
        }
        
        .settings-scroll::-webkit-scrollbar-track {
          background: transparent;
        }
        
        .settings-scroll::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.3);
          border-radius: 3px;
        }
        
        .settings-scroll::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.5);
        }
        
        /* 深色主题滚动条 */
        .dark .settings-scroll::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.2);
        }
        
        .dark .settings-scroll::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.4);
        }
      `}</style>
    </div>
  );
};

const Video = VideoPlayerWithDanmaku;
export default Video;
